<template>
  <div>
    <h1>小区信息</h1>
    <el-row>
      <el-col :push='2' :span="20">
        <div>
          <el-form :inline="true">
            <el-form-item label="查询小区信息:" style="float: left">
              <el-input placeholder="查询所需要的内容......" v-model="search"></el-input>
            </el-form-item>
            <el-form-item style="float: right">
              <el-button @click="handleAdd" icon="el-icon-edit-outline" size="small" type="primary"
                         v-if="role==='manager'">
                添加
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table">
          <el-table
            :data="tables.slice((page-1)*pageSize,page*pageSize)"
            border
            style="width: 100%">
            <el-table-column
              align="center"
              label="序号"
              type="index"
              width="60px">
            </el-table-column>
            <el-table-column
              align="center"
              label="编号"
              width="220px">
              <template slot-scope="scope">
                <span>{{scope.row.id}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="类型"
              width="160px">
              <template slot-scope="scope">
                <span>{{scope.row.type}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="名称"
              width="220px">
              <template slot-scope="scope">
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="地址"
              width="260px">
              <template slot-scope="scope">
                <span>{{ scope.row.address}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="所在商圈"
              width="160px">
              <template slot-scope="scope">
                <span>{{ scope.row.tradeArea}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="广告点位"
              width="165px">
              <template slot-scope="scope">
                <el-link :underline="false" @click="getSpotsByCommunity(scope.row.id)" type="primary">查看</el-link>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作" v-if="role==='manager'&& isLogin" width="160">
              <template slot-scope="scope">
                <el-button
                  @click="deleteCommunity(scope.row.id)"
                  size="mini"
                  type="danger">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <addCommunity :dialogAdd="dialogAdd" @update="getAllCommunities"></addCommunity>
    <el-dialog :visible.sync="dialogTableVisible" title="所拥有的广告位" width="50%">
      <el-table border :data="spotListByCommunityId">
        <el-table-column label="编号" property="id" width="220" align="center"></el-table-column>
        <el-table-column label="类型" property="spotType" width="180" align="center"></el-table-column>
        <el-table-column label="规格" property="spotSize" width="180" align="center"></el-table-column>
        <el-table-column label="状态" width="180" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.isBusy===false && scope.row.isRepair===false">空闲</span>
            <span v-if="scope.row.isBusy===true && scope.row.isRepair===false">使用中</span>
            <span v-if="scope.row.isRepair===true">维修中</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import addCommunity from './addCommunity.vue'
import communityApi from '@/api/community/community'

export default {
  name: 'communityList',
  components: {
    addCommunity
  },
  data () {
    return {
      role: this.$store.state.role, // 用户角色
      isLogin: this.$store.state.isLogin, // 用户是否登录判断
      dialogTableVisible: false, // 通过小区查看广告位的弹窗显示控制
      spotListByCommunityId: [], // 通过小区id得到所在小区的所有广告位
      search: '', // 用户判断搜索输入框是否生效
      page: 1, // 显示小区列表的页码
      pageSize: 10, // 显示小区列表的单页数量
      community: {// 小区对象
        id: '',
        type: '',
        name: '',
        address: '',
        tradeAreas: ''
      },
      communities: [], // 小区列表
      dialogAdd: {// 小区添加弹窗控制
        show: false
      }
    }
  },
  /**
   * @description 在小区列表搜索功能
   */
  computed: {
    // 模糊搜索
    tables () {
      const search = this.search
      if (search) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
        return this.communities.filter(data => {
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          return Object.keys(data).some(key => {
            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.communities
    }
  },
  methods: {
    /**
     * @description 小区添加按钮事件
     */
    handleAdd () {
      this.dialogAdd.show = true
    },
    /**
     *@description 改变当前显示小区列表页数
     */
    handleSizeChange (size) {
      this.pageSize = size
    },
    /**
     * @description 改变当前显示小区列表页码
     * @param val
     */
    handleCurrentChange (val) {
      this.page = val
    },
    /**
     * @description 获取小区列表
     */
    getAllCommunities () {
      communityApi.getAllCommunities().then(data => {
        this.communities = data.data
        console.log(data.data)
      })
    },
    /**
     * @description 通过小区id获取该小区所有广告位
     * @param communityId
     */
    getSpotsByCommunity (communityId) {
      this.dialogTableVisible = true
      communityApi.getSpotsByCommunity(communityId).then(data => {
        this.spotListByCommunityId = data.data
        console.log(data.data)
      })
    },
    /***
     * @description 删除小区
     * @param communityId
     */
    deleteCommunity (communityId) {
      communityApi.deleteCommunity(communityId).then(data => {
        console.log(data)
        this.$message({
          type: 'success',
          message: '删除信息成功'
        })
        this.getAllCommunities() // 删除数据，更新视图
      }).catch(err => {
        this.$message({
          type: 'warning',
          message: '没有收到成功信息'
        })
        console.log(err)
      }
      )
    }
  },
  /**
   * @description 初始化页面显示小区列表
   */
  created () {
    this.getAllCommunities()
  }
}
</script>

<style scoped>

</style>
